<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="__STATIC__/pan/shouyi/theme.css" rel="stylesheet">
  <script src="__STATIC__/js/jquery.js"></script>
  <script src="__STATIC__/js/lay/modules/layer.js"></script>
  <script src="__STATIC__/pan/shouyi/bootstrap.js"></script>
</head>
<body>
<style>
  @media (max-width : 500px) {
    .modal-dialog {
      margin: 0rem;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .modal-content {
      border: 0;
      border-radius: 0.375rem 0.375rem 0 0;
      outline: 0;
    }

    .modal.fade .modal-dialog {
      transform: translate3d(0, 100vh, 0);
    }

    .modal.show .modal-dialog {
      transform: translate3d(0, 0, 0);
    }


  }

  .mb_vip_item.active {
    background-color: rgba(115, 255, 236, 0.18)
  }
</style>

<div class="modal-dialog" role="document" style="max-width: 550px;">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">开通VIP会员</h5>
      {eq name="$is_layer" value="0"}
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span class="font-weight-light" aria-hidden="true">&times;</span>
      </button>
      {/eq}
    </div>
    <div class="modal-body p-3">
      <div id="mb_vip_selection">

        {volist name="$rule" id="vo"}
        <div class="mb_vip_item d-flex justify-content-between py-3 px-2"
             onclick="mb_switch_vip({$vo.id});" data-vip="{$vo.id}">
          <div class=" ">
            <span class="font-weight-normal my-0">{$vo.name}</span>
            <span class="badge badge-soft-success badge-pill ml-1">限时{$vo.discount}折</span>
            <p class="fs--1 mb-0">{$vo.desc}</p>
          </div>
          <div class=" ">
            <h3 class="font-weight-medium my-1"> {$vo.money}<small class="fs--1 text-700">元
              / {$vo.day_name}</small> </h3>
          </div>
        </div>
        {/volist}
      </div>
      <h5 class="text-center mb-3">选择购买方式</h5>
      <div class="text-center">
        <button onclick="zhifu('alipay');" class="btn btn-lg btn-falcon-primary mr-4">
          <svg class="svg-inline--fa fa-alipay fa-w-14 mr-2" aria-hidden="true" focusable="false"
               data-prefix="fab" data-icon="alipay" role="img" xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 448 512" data-fa-i2svg="">
            <path fill="currentColor"
                  d="M377.74 32H70.26C31.41 32 0 63.41 0 102.26v307.48C0 448.59 31.41 480 70.26 480h307.48c38.52 0 69.76-31.08 70.26-69.6-45.96-25.62-110.59-60.34-171.6-88.44-32.07 43.97-84.14 81-148.62 81-70.59 0-93.73-45.3-97.04-76.37-3.97-39.01 14.88-81.5 99.52-81.5 35.38 0 79.35 10.25 127.13 24.96 16.53-30.09 26.45-60.34 26.45-60.34h-178.2v-16.7h92.08v-31.24H88.28v-19.01h109.44V92.34h50.92v50.42h109.44v19.01H248.63v31.24h88.77s-15.21 46.62-38.35 90.92c48.93 16.7 100.01 36.04 148.62 52.74V102.26C447.83 63.57 416.43 32 377.74 32zM47.28 322.95c.99 20.17 10.25 53.73 69.93 53.73 52.07 0 92.58-39.68 117.87-72.9-44.63-18.68-84.48-31.41-109.44-31.41-67.45 0-79.35 33.06-78.36 50.58z">
            </path>
          </svg>支付宝</button>

        <button onclick="zhifu('wxpay');" class="btn btn-lg btn-falcon-success"><!--span class="fab fa-weixin mr-2"></span>-->
          <svg class="svg-inline--fa fa-weixin fa-w-18 mr-2"
               aria-hidden="true" focusable="false" data-prefix="fab" data-icon="weixin" role="img"
               xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
            <path fill="currentColor"
                  d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z">
            </path>
          </svg>微信支付</button>

      </div>
    </div>
    <div class="modal-footer">
      {eq name="$is_layer" value="0"}
      <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>
      {/eq}
      <a href="javascript:;" onclick="vip_kefu()" class="btn btn-primary">联系客服</a>
    </div>
  </div>
</div>


<script>
  var vip_id = "";

  function vip_kefu() {
    layer.alert("{$Think.config.basic.site_kefu|raw}", { title: '联系客服' });
  }

  function zhifu(pay_type){

    layer.open({
      type: 2,
      title: '支付页面',
      closeBtn: 1,
      area: ['100%', '100%'], // 宽高
      content: "/user/payment?pay_type="+pay_type+"&vip="+vip_id + "&share_id={$share_id}",
      end: function () {
        //设置订单为已关闭
        $.get("/user/vip_close");
      },
      cancel:function(index){
        //eg1
        layer.confirm('确定要取消支付吗？ 求求你了(〒︿〒)', {icon: 3}, function(index2){
          layer.close(index2);
          layer.confirm('真的要关闭吗？ ..(｡•ˇ‸ˇ•｡)…', {icon: 3}, function(index2){
            layer.close(index2);
            layer.close(index);
            layer.msg("好吧... (╯︵╰)");
          });
        });
        return false;
      },
    });

  }

  function mb_switch_vip(id) {
    $("#mb_vip_selection > div.active").removeClass("active");
    var xx  = $("#mb_vip_selection > div:eq("+id+")");
    xx.addClass("active");
    vip_id = xx.attr("data-vip");
  }
  mb_switch_vip(2);
</script>
</body>
</html>